<template>
  <div class="picture-box">
    <el-row class="table-row" :gutter="40">
      <el-col :span="12" class="table-col">
        <el-table
          class="table-container"
          :data="tableDataLT"
          :loading="isLoadingLT"
          border
          :header-cell-class-name="'table-header'"
        >
          <el-table-column
            prop="date"
            label="客户爸爸图片预览"
            align="center"
          >
          </el-table-column>
          <el-table-column
            align="center"
            label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="check(scope.$index, scope.row)"
              >编辑图片</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="12" class="table-col">
        <el-table
          class="table-container"
          :data="tableDataRT"
          :loading="isLoadingRT"
          border
          :header-cell-class-name="'table-header'"
        >
          <el-table-column
            prop="date"
            label="撒钱活动图片预览"
            align="center"
          >
          </el-table-column>
          <el-table-column
            align="center"
            label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="check(scope.$index, scope.row)"
              >编辑图片</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row class="table-row" :gutter="40">
      <el-col :span="12" class="table-col">
        <el-table
          class="table-container"
          :data="tableDataLB"
          :loading="isLoadingLB"
          border
          :header-cell-class-name="'table-header'"
        >
          <el-table-column
            prop="date"
            label="VIP活动图片预览"
            align="center"
          >
          </el-table-column>
          <el-table-column
            align="center"
            label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="check(scope.$index, scope.row)"
              >编辑图片</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <!-- 点击添加 -->
    <el-dialog
      :visible.sync="showEditModal"
    >
      <div class="modal-container">
        <el-row class="modal-content" :gutter="16">
          <el-col :span="6">
            <p class="modal-label">Banner名称</p>
          </el-col>
          <el-col :span="18">
            <el-input
              v-model="addName"
              placeholder="广告位名称"
              class="modal-input"
              size="small"
            ></el-input>
          </el-col>
        </el-row>
        <el-row class="modal-content" :gutter="16">
          <el-col :span="6">
            <p class="modal-label">Banner图片</p>
            <p class="modal-label-detail">(建议尺寸 111*222)</p>
          </el-col>
          <el-col :span="18">
          <el-upload
            class="upload-demo"
            drag
            action="/"
            multiple
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件</div>
          </el-upload>
          </el-col>
        </el-row>
        <div slot="footer" class="modal-footer">
          <el-button type="primary" @click="onClickEditConfirm">完成</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showEditModal: false,
      addName: '',
      tableDataLT: [{
        img: '123123'
      }],
      tableDataRT: [{
        img: '123123'
      }],
      tableDataLB: [{
        img: '123123'
      }],
      tableDataRB: [{
        img: '123123'
      }],
      isLoadingLT: false,
      isLoadingRT: false,
      isLoadingLB: false,
      isLoadingRB: false,
    }
  },
  mounted() {

  },
  methods: {
    onClickEditConfirm() {

    },
    check() {
      this.showEditModal = true
    }
  }
}
</script>

<style scoped>
.picture-box {
  overflow-x: hidden;
}
.table-row {
  padding: 40px 40px 20px 40px;
  margin-bottom: 10px;
}
.table-col {
  /*padding: 20px;*/
}
.table-container {

}
.modal-content {
  margin-top: 15px;
}
.modal-label {
  font-size: 16px;
  line-height: 32px;
  text-align: center;
}
.modal-label-detail {
  text-align: center;
}
.modal-input {
  width: 100%;
}
.modal-footer {
  text-align: center;
  margin-top: 15px;
}
.modal-footer button {
  color: #fff;
  width: 100px;
}
</style>
